import React, {
    PureComponent
} from 'react';
import PropTypes from 'prop-types';

import {
    Animated,
    Dimensions,
    PanResponder,
    Platform,
    StyleSheet,
    Text,
    View
} from 'react-native';

class Card extends PureComponent {
    constructor() {
        super();
    }

    static propTypes = {
        children: PropTypes.oneOfType([
            PropTypes.array,
            PropTypes.object
        ]).isRequired,
        style: PropTypes.oneOfType([
            PropTypes.number,
            PropTypes.object,
            PropTypes.array
        ]),
        onSwipedLeft: PropTypes.func,
        onSwipedRight: PropTypes.func,
        onSwipedTop: PropTypes.func,
        onSwipedBottom: PropTypes.func,
        onSwiped: PropTypes.func,
    }

    static defaultProps = {
        style: {},
        onSwiped: () => {},
        onSwipedLeft: () => {},
        onSwipedRight: () => {},
        onSwipedTop: () => {},
        onSwipedBottom: () => {},
    }

    static contextTypes = {
        cardMove:PropTypes.func,
        unCardMove:PropTypes.func
    }

    componentDidMount(){
        const {
            cardMove
        } = this.context;
        cardMove(this.onCardMove);
    }

    componentWillUnmount(){
        const {
            unCardMove
        } = this.context;
        if(!!this && !!this.cardMove) {
            unCardMove(this.cardMove);
        }
    }

    onCardMove = (e,index) => {
        if(!this.cardEl) {
            return false
        }
        if(!!this.cardEl.cardMove) {
            this.cardEl.cardMove(e,index)
        }
    }

    render() {
        const {
            style,
            children
        } = this.props;
        return (
            <View style={style}>
                {React.cloneElement(children,{
                    ref:e=>this.cardEl = e
                })}
            </View>
        )
    }
}

export default Card;

